<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div
    class="page-content"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="finish"
    infinite-scroll-distance="16"
  >
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <h2>推荐好友赚佣金 推荐好友投资一级可获得{{proxy.one}}%的佣金，二级可获得{{proxy.two}}%的佣金</h2>
      <div class="tips">
        <p>截图二维码发送给好友 扫一扫进行注册下载</p>
      </div>
      <div id="qrcode" class="qrcode">
        <img :src="qrcode" />
      </div>
      <div class="profit">
        <div class="nav">
          <p>已推荐好友</p>
          <p>
            <span>{{total}}</span>
          </p>
        </div>
        <div class="nav">
          <p>已收返佣(元)</p>
          <p>
            <span>{{price|money}}</span>
          </p>
        </div>
      </div>
      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th>会员名</th>
            <th>下线层级</th>
            <th>注册时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in dataList" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.le}}</td>
            <td>{{item.create_time}}</td>
          </tr>
          <tr v-if="!dataList.length">
            <td colspan="3">还没有任何推荐会员</td>
          </tr>
        </tbody>
      </table>
      <commonFooter></commonFooter>
    </van-pull-refresh>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonFooter } from "common";
import { USER_NAME, PUSH_HOST, PROXY } from "@/store/mutation-types";
import { userRecommListApi } from "@/api/user";
import { openconfApi } from "@/api";
import { API_HOST } from "@/store/mutation-types";

import QRCode from "qrcode";
export default {
  name: "recharge",
  components: {
    commonFooter
  },
  computed: {
    proxy() {
      return this.$ls.get(PROXY) || { one: "", two: "" };
    }
  },
  methods: {
    // qrcode() {
    //   let push_host = this.$ls.get(PUSH_HOST);
    //   let qrcode = new QRCode("qrcode", {
    //     width: 132,
    //     height: 132,
    //     text:
    //       push_host + "/#/user/register?username=" + this.$ls.get(USER_NAME), // 二维码地址
    //     colorDark: "#000",
    //     colorLight: "#fff"
    //   });
    // },
    async onRefresh() {
      this.finish = false;
      this.page = 1;
      this.dataList = [];
      await this.loadMore();
      this.isLoading = false;
    },
    loadMore() {
      if (this.finish) {
        return;
      }
      this.finish = true;
      return userRecommListApi({ page: this.page }).then(res => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.price = res.data.price;
          if (res.data.data.length > 0) {
            this.dataList = [...this.dataList, ...res.data.data];
          }
          if (res.data.data.length < 15) {
            this.finish = true;
          } else {
            setTimeout(() => {
              this.finish = false;
              this.page++;
            }, 500);
          }
        }
      });
    }
  },
  mounted() {
    // this.qrcode();
    // this.loadMore();
    openconfApi().then(res => {
      if (res.code == 200) {
        if (res.data.push.chan == "images" && res.data.push.images) {
          this.qrcode = res.data.apihost + res.data.push.images;
        } else {
          QRCode.toDataURL(
            window.location.origin +
              "/#/user/register?username=" +
              this.$ls.get(USER_NAME),
            {
              //这个this.url就是你扫码后要跳转的地址
              //或者是长按识别跳转的地址（两者是一样的），这个url是全局变量
              //这里也可以是文本内容，扫描后会弹出一个空白界面文本
              version: 7, //这个是版本号，
              errorCorrectionLevel: "Q", //这个是容错率,(建议选较低)更高的级别可以识别
              //更模糊的二维码，但会降低二维码的容量
              width: 280,
              height: 280, //设置二维码图片大小
              margin: 0
            }
          )
            .then(url => {
              this.qrcode = url; //这个是vue实例全局的变量，赋值给他。后面会用在img的src属性上
            })
            .catch(err => {
              console.error(err); //这里看不懂的话去看一下Promise（then, catch）
            });
        }
      }
    });
  },
  data() {
    return {
      qrcode: "",
      total: 0,
      price: 0,
      page: 1,
      finish: false,
      dataList: [],
      isLoading: false,
      title: "邀请好友"
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
h2 {
  padding: 0.2rem;
  font: 600 0.38rem/1.5 "Microsoft YaHei";
  color: #f00;
}
.tips {
  margin: 0.5rem 0;
  text-align: center;
  font: 600 0.38rem/1.5 "Microsoft YaHei";
}
.qrcode {
  padding: 0.4rem 0;
  text-align: center;
  border: 1px solid #eee;
  margin: 0 0.3rem;
  background: #fff;
  /deep/ img {
    display: inline-block !important;
    width: 50%;
    vertical-align: top;
  }
}

.profit {
  margin: 0.5rem 0;
  text-align: center;
  display: flex;
  .nav {
    flex: 1;
    font: 600 0.45rem/1.5 "Microsoft YaHei";
    color: #333;
    span {
      color: @orange-color;
      font: 600 0.75rem/1.5 "Microsoft YaHei";
    }
  }
}
.btn {
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  border: 1px solid #ccc;
  font: 0.35rem/2 "Microsoft YaHei";
  color: #666;
  margin: 0.3rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  margin: 0.5rem 0;
  font: 0.3rem/1.5 "Microsoft YaHei";
  color: #333;
  background: #fff;
  thead {
    background: #f6f4f5;
  }
  td,
  th {
    min-width: 0.2rem;
    border: 1px #ddd solid;
    max-width: 5rem;
    padding: 0.2rem 0;
    word-wrap: break-word;
    word-break: break-all;
  }
}
/deep/ .van-pull-refresh {
  overflow: initial;
  min-height: 100%;
}
</style>